<template>
  <div>
    <nav-bar title="礼包搜索" :isShow="false"></nav-bar>
    <form action="/">
      <van-search
        ref="searchRef"
        v-model="listQuery.code"
        show-action
        placeholder="请输入礼包编号"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <van-list v-model="loading" :finished="finished">
      <van-cell-group v-for="item in gifts" :key="item.id">
        <van-cell :title="'礼包编号: ' + item.card_no" ></van-cell>
        <van-cell :title="'礼包名称: ' + item.gift_name" ></van-cell>
        <van-cell title="礼包商品: "></van-cell>
        <van-card
          v-for="item in item.goods"
          :desc="item.desc"
          :title="item.name"
          :thumb="item.title_image || '-'"
          :key="item.id"
          @click="goodsDetail(item.id)"
        />
      </van-cell-group>
    </van-list>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar";
import { getWxGiftPackByCode } from "@/api/shopping";
export default {
  name: "GoodsSearch",
  components: {
    NavBar,
  },
  props: {},
  data() {
    return {
      gifts: [],
      loading: false,
      finished: true,
      listQuery: {
        code: null,
      },
    };
  },
  computed: {},

  mounted() {
    this.$nextTick(() => {
      document.getElementsByClassName('van-field__control')[0].focus();
    });
  },
  methods: {
    
    getGiftPackList() {
      getWxGiftPackByCode(this.listQuery)
        .then((res) => {
          this.gifts = res.data;
          console.log(this.gifts);
        })
        .catch((error) => {
          console.log(error);
        });
    },

    onSearch(val) {
      console.log(val);
      this.listQuery.code = val
      this.getGiftPackList();
    },

    onCancel() {
      console.log("取消");
      this.listQuery.code = null;
    },

    goodsDetail(goods_id) {
      console.log(goods_id);
      this.$router.push(`/goods/${goods_id}`);
    },
  },
};
</script>

<style  scoped>
.van-cell__label{
  margin-left: 30px;
  font-size: 16px;
}
.van-search .van-cell{
  line-height: 45px;
  font-size: 18px;
}
</style>